<template>
	<div class="selectorLabel">
		<div style="float: left;">
			<template v-if="model[prop]">
				<div style="float:left;">
					<ex-label :key="elk" :value="model[prop]" :code="code"></ex-label>
				</div>
				<div class="selectorClear">
					<el-icon size="small" @click="model[prop]=null">
						<component is="el-icon-circle-close"></component>
					</el-icon>
				</div>
			</template>
			<template v-else>
				<div style="padding-left:10px;float:left;color: rgba(86,84,84,0.50);cursor: pointer;font-size: 13px;" @click="openSelector">请选择{{column.label||column.name}}</div>
			</template>
		</div>
		<!--div class="selectorButton"  v-if="isicon" style="float: right;cursor: pointer;">
			<el-icon v-if="isicon" size="small" @click="openSelector" style="margin: 0 7px 0 0;color:var(--el-text-color-placeholder)">
				<component is="el-icon-search"></component>
			</el-icon>
		</div>
		<div class="selectorButton" v-if="!isicon" style="float: right;cursor: pointer;height: 33px !important;margin-top: -1.5px;">
			<el-button v-if="!isicon" plain type="primary" @click="openSelector" style="">
				选择
			</el-button>
		</div-->

		<div class="selectorButton"  style="float: right;cursor: pointer;">
			<el-icon  size="small" @click="openSelector" style="margin: 0 7px 0 0;color:var(--el-text-color-placeholder)">
				<component is="el-icon-search"></component>
			</el-icon>
		</div>
	</div>

	<selector ref="selector" :ids="ids" :data="data" @success="assetSelectHandler" :width="width"></selector>
</template>

<script>
import ExLabel from "@/components/exLabel/index.vue";
import Selector from "@/components/exSelector/selecter.vue";
import entity from "@/constant/model/entity";

export default {
	name: "exSelector",
	emits: ["change"],
	components: {Selector, ExLabel},
	props: {
		code: {type: String, default: ""},
		model: {type: Object, default: null},
		prop: {type: String, default: null},
		params: {type: Object, default: {}},
		column:{type:Object,default: {}},
		isicon: {type: Boolean,default:true},
		width: {type: Number, default:1300},
	},
	data() {
		return {
			ids: [],
			data: {},
			elk: 0,
      selectorKey:null,
			preRelationProp:null,
			preRelationPropOldValue:null,
		};
	},
	watch: {
		model: {
			handler() {
				if (this.ids[0] && this.model[this.prop] !== this.ids[0]) {
					this.elk++;
				}
				if(this.preRelationProp&&(!this.model[this.preRelationProp]||this.model[this.preRelationProp]!==this.preRelationPropOldValue)){//关联属性发生变化后，重置当前属性的值
					this.model[this.prop] = null;
				}
			},
			deep: true,
			immediate: true,
		}
	},
	methods: {
		openSelector() {
			let fixedParams = {selector: this.code};
			if (this.code === entity.SysUser.name) {//当选择用户时，判断是否存在部门的字段，进行选择关联
				fixedParams.deptIds = this.column.deptIds;
				if(this.column.checkDept!==false){
					if (this.prop.includes("usingMenId")) {//使用人
						let deptProp = this.prop.replace("usingMenId", "usingDepartmentId");//使用部门
						if (deptProp in this.model) {
							if(!this.model[deptProp]){
								this.$message.warning("请选选择关联的部门");
								return;
							}
							this.preRelationProp = deptProp;
							this.preRelationPropOldValue = this.model[deptProp];
							this.params._preRelationProp = this.model[deptProp];
						}
					}

					if (this.prop.includes("dutyMenId")) {//责任人
						let deptProp = this.prop.replace("dutyMenId", "dutyDepartmentId");//责任部门
						if (deptProp in this.model) {
							if(!this.model[deptProp]){
								this.$message.warning("请选选择关联的部门");
								return;
							}
							this.preRelationProp = deptProp;
							this.preRelationPropOldValue = this.model[deptProp];
							this.params._preRelationProp = this.model[deptProp];
						}
					}

					if (this.prop.includes("custodyMenId")) {//托管人
						let deptProp = this.prop.replace("custodyMenId", "custodyDepartmentId");//托管部门
						if (deptProp in this.model) {
							if(!this.model[deptProp]){
								this.$message.warning("请选选择关联的部门");
								return;
							}
							this.preRelationProp = deptProp;
							this.preRelationPropOldValue = this.model[deptProp];
							this.params._preRelationProp = this.model[deptProp];
						}
					}

					if (this.prop.includes("borrowingMenId")) {//借用人
						let deptProp = this.prop.replace("borrowingMenId", "borrowingDepartmentId");//借用部门
						if (deptProp in this.model) {
							if(!this.model[deptProp]){
								this.$message.warning("请选选择关联的部门");
								return;
							}
							this.preRelationProp = deptProp;
							this.preRelationPropOldValue = this.model[deptProp];
							this.params._preRelationProp = this.model[deptProp];
						}
					}

					if (this.prop.includes("authorizePerson")) {//授权人
						let deptProp = this.prop.replace("authorizePerson", "authorizeDepartment");//授权部门
						if (deptProp in this.model) {
							if(!this.model[deptProp]){
								this.$message.warning("请选选择关联的部门");
								return;
							}
							this.preRelationProp = deptProp;
							this.preRelationPropOldValue = this.model[deptProp];
							this.params._preRelationProp = this.model[deptProp];
						}
					}
				}
			}
      console.log(this.params);
			this.$refs.selector.open(Object.assign(fixedParams, this.params));
		},

		async assetSelectHandler() {
			if (this.model && this.prop) {
				if (this.prop === 'parentLevelCode') {
					this.model[this.prop] = this.data.levelCode;
				} else {
					this.model[this.prop] = this.ids[0];
				}
				this.elk++;
				this.$emit("change", this.data);
			}
		},
	}
}
</script>

<style scoped>

.selectorLabel {
	float: left;
	border-radius: 4px;
	width: 100%;
	border: 1px #dcdfe6 solid;
	height: 30.6px;
	line-height: 30.6px;
}

.selectorClear {
	display: none;
	float: left;
	margin-top: 3px;
	margin-bottom: -3px;
	cursor: pointer;
}

.selectorLabel:hover .selectorClear {
	display: block;
}

</style>
